import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/login.vue'
import Home from '../components/Home.vue'
import Welcome from '../components/welcome.vue'
import Users from '../components/user/Users.vue'
import Rights from '../components/power/Rights.vue'
import Roles from '../components/power/Roles.vue'
import Cate from '../components/goods/Cate.vue'
import Params from '../components/goods/Params.vue'
import GoodsList from '../components/goods/List.vue'
import Add from '../components/goods/Add.vue'
import Order from '../components/order/Order.vue'
import Report from '../components/report/Report.vue'
Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/login' },
  , { path: '/login', component: Login },
  , {
    path: '/home', component: Home,
    redirect: '/welcome',
    children: [{ path: '/welcome', component: Welcome },
    { path: '/users', component: Users },
    { path: '/rights', component: Rights },
    { path: '/roles', component: Roles },
    { path: '/categories', component: Cate },
    { path: '/params', component: Params },
    { path: '/goods', component: GoodsList },
    { path: '/goods/add', component: Add },
    { path: '/orders', component: Order },
    { path: '/reports', component: Report },
    ]
  },
  // 嵌套路由 就是 默认显示父组件的内容 只是在占位符的位置渲染 子组件的内容
  //先到home-> 默认重定向到 welcome -> 至此 在占位符的位置上 展示了 welcome的内容
  //  当我 点击二级导航栏 将路由重定向到/users目录下时 占位符自动显示 User组件内的内容

]
const router = new VueRouter({
  routes
})
// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  if (to.path === '/login') return next(); //你要访问登录页面 我们直接放行
  // 获取token 我们可以调用
  const tokenStr = window.sessionStorage.getItem('token')
  if (!tokenStr) return next('/login') //如果token 不存在 强制跳转到 token
  next() //如果有的话 就放行
})
// to 代表将要访问的路径
// from 代表从哪个路径跳转而来
// next 是一个函数表示放行 next() 直接放行 next('/login) 强制跳转
export default router
